{% extends 'base/base.html' %}
{% load static %}
{% load i18n %}

{% block title %}{% trans "消息详情" %} - {{ message.title }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">
                <i class="fa fa-envelope"></i>
                {% trans "消息详情" %}
            </h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'projects:dashboard' %}">{% trans "仪表盘" %}</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'projects:project_detail' project.id %}">{{ project.name }}</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'projects:message_list' project.id %}">{% trans "消息管理" %}</a></li>
                    <li class="breadcrumb-item active">{{ message.title|truncatechars:30 }}</li>
                </ol>
            </nav>
        </div>
        <div>
            <a href="{% url 'projects:message_list' project.id %}" class="btn btn-outline-secondary">
                <i class="fa fa-arrow-left"></i>
                {% trans "返回列表" %}
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <!-- 消息内容 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fa fa-file-text"></i>
                        {% trans "消息内容" %}
                    </h5>
                </div>
                <div class="card-body">
                    <h4 class="text-primary mb-3">{{ message.title }}</h4>
                    <div class="message-content">
                        {{ message.content|linebreaks }}
                    </div>
                </div>
            </div>

            <!-- 原始数据 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fa fa-code"></i>
                        {% trans "原始数据" %}
                    </h5>
                </div>
                <div class="card-body">
                    <pre class="bg-light p-3 rounded"><code>{{ message.source_data|pprint }}</code></pre>
                </div>
            </div>

            <!-- 处理历史记录 -->
            {% if processing_history %}
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fa fa-history"></i>
                        {% trans "处理历史记录" %}
                    </h5>
                </div>
                <div class="card-body">
                    <div class="timeline">
                        {% for history in processing_history %}
                        <div class="timeline-item {% if forloop.first %}active{% endif %}">
                            <div class="timeline-marker"></div>
                            <div class="timeline-content">
                                <h6 class="timeline-title">
                                    {% if history.action == 'mark_processed' %}
                                        <i class="fa fa-check-circle text-success"></i>
                                        {% trans "标记为已处理" %}
                                    {% elif history.action == 'mark_pending' %}
                                        <i class="fa fa-clock-o text-warning"></i>
                                        {% trans "标记为未处理" %}
                                    {% elif history.action == 'note_added' %}
                                        <i class="fa fa-sticky-note text-info"></i>
                                        {% trans "添加备注" %}
                                    {% else %}
                                        <i class="fa fa-info-circle text-muted"></i>
                                        {{ history.get_action_display }}
                                    {% endif %}
                                </h6>
                                <p class="mb-1">
                                    <small class="text-muted">
                                        <i class="fa fa-user"></i>
                                        {{ history.performed_by.username }}
                                    </small>
                                </p>
                                <p class="mb-0">
                                    <small class="text-muted">
                                        <i class="fa fa-clock"></i>
                                        {{ history.performed_at|date:"Y-m-d H:i:s" }}
                                    </small>
                                </p>
                                {% if history.notes %}
                                <p class="mt-2 mb-0">
                                    <small class="text-muted">
                                        <strong>{% trans "备注内容:" %}</strong> {{ history.notes|truncatechars:50 }}
                                    </small>
                                </p>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- 备注列表 -->
            {% if notes %}
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fa fa-comments"></i>
                        {% trans "备注信息" %}
                        <span class="badge bg-secondary ms-2">{{ notes|length }}</span>
                    </h5>
                </div>
                <div class="card-body">
                    {% for note in notes %}
                    <div class="note-item {% if not forloop.last %}mb-3 pb-3 border-bottom{% endif %}">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <strong>{{ note.author.username }}</strong>
                                <small class="text-muted ms-2">
                                    {{ note.created_at|date:"Y-m-d H:i:s" }}
                                </small>
                            </div>
                        </div>
                        <p class="mb-0 mt-2">{{ note.content|linebreaksbr }}</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>

        <div class="col-lg-4">
            <!-- 消息信息 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fa fa-info-circle"></i>
                        {% trans "消息信息" %}
                    </h5>
                </div>
                <div class="card-body">
                    <dl class="row mb-0">
                        <dt class="col-sm-5">{% trans "消息类型" %}:</dt>
                        <dd class="col-sm-7">
                            {% if message.message_type == 'announcement' %}
                                <span class="badge bg-primary">
                                    <i class="fa fa-bullhorn"></i>
                                    {% trans "公告消息" %}
                                </span>
                            {% else %}
                                <span class="badge bg-info">
                                    <i class="fa fa-bell"></i>
                                    {% trans "Webhook消息" %}
                                </span>
                            {% endif %}
                        </dd>

                        <dt class="col-sm-5">{% trans "处理状态" %}:</dt>
                        <dd class="col-sm-7">
                            {% if message.is_processed %}
                                <span class="badge bg-success">
                                    <i class="fa fa-check-circle"></i>
                                    {% trans "已处理" %}
                                </span>
                            {% else %}
                                <span class="badge bg-warning text-dark">
                                    <i class="fa fa-clock-o"></i>
                                    {% trans "未处理" %}
                                </span>
                            {% endif %}
                        </dd>

                        <dt class="col-sm-5">{% trans "创建时间" %}:</dt>
                        <dd class="col-sm-7">
                            <small class="text-muted">
                                <i class="fa fa-clock"></i>
                                {{ message.created_at|date:"Y-m-d H:i:s" }}
                            </small>
                        </dd>

                        {% if message.processed_by %}
                            <dt class="col-sm-5">{% trans "处理人" %}:</dt>
                            <dd class="col-sm-7">
                                <small class="text-muted">
                                    <i class="fa fa-user"></i>
                                    {{ message.processed_by.username }}
                                </small>
                            </dd>

                            <dt class="col-sm-5">{% trans "处理时间" %}:</dt>
                            <dd class="col-sm-7">
                                <small class="text-muted">
                                    <i class="fa fa-clock"></i>
                                    {{ message.processed_at|date:"Y-m-d H:i:s" }}
                                </small>
                            </dd>
                        {% endif %}
                    </dl>
                </div>
            </div>

            <!-- 状态操作 -->
            {% if user.is_super_admin or user_role == 'admin' %}
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fa fa-cog"></i>
                        {% trans "状态操作" %}
                    </h5>
                </div>
                <div class="card-body">
                    {% if message.is_pending %}
                        <button type="button" class="btn btn-success w-100 mb-2" id="mark-processed-btn">
                            <i class="fa fa-check"></i>
                            {% trans "标记为已处理" %}
                        </button>
                    {% else %}
                        <button type="button" class="btn btn-warning w-100 mb-2" id="mark-pending-btn">
                            <i class="fa fa-clock-o"></i>
                            {% trans "标记为未处理" %}
                        </button>
                    {% endif %}
                    
                    <small class="text-muted d-block">
                        {% trans "操作将被记录，请谨慎操作" %}
                    </small>
                </div>
            </div>
            {% endif %}

            <!-- 添加备注 -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fa fa-sticky-note"></i>
                        {% trans "添加备注" %}
                    </h5>
                </div>
                <div class="card-body">
                    <form method="post" action="">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="add_note">
                        <div class="mb-3">
                            <textarea name="note_content" class="form-control" rows="3" 
                                      placeholder="{% trans '请输入备注内容...' %}" required></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary w-100">
                            <i class="fa fa-plus"></i>
                            {% trans "添加备注" %}
                        </button>
                    </form>
                </div>
            </div>
    </div>
</div>

<style>
    .message-content {
        line-height: 1.8;
    }
    
    .message-content p:last-child {
        margin-bottom: 0;
    }
    
    pre {
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    
    .card {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
    
    dt {
        font-weight: 600;
    }

    /* 时间轴样式 */
    .timeline {
        position: relative;
        padding-left: 30px;
    }

    .timeline::before {
        content: '';
        position: absolute;
        left: 15px;
        top: 0;
        bottom: 0;
        width: 2px;
        background-color: #e9ecef;
    }

    .timeline-item {
        position: relative;
        margin-bottom: 20px;
    }

    .timeline-item:last-child {
        margin-bottom: 0;
    }

    .timeline-marker {
        position: absolute;
        left: -23px;
        top: 0;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background-color: #6c757d;
        border: 3px solid #fff;
        box-shadow: 0 0 0 1px #e9ecef;
    }

    .timeline-item.active .timeline-marker {
        background-color: #0d6efd;
        box-shadow: 0 0 0 1px #0d6efd;
    }

    .timeline-content {
        margin-left: 10px;
    }

    .timeline-title {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    /* 备注样式 */
    .note-item {
        background-color: #f8f9fa;
        padding: 15px;
        border-radius: 0.375rem;
        border-left: 3px solid #0d6efd;
    }

    .note-item:last-child {
        margin-bottom: 0;
    }

    .timeline-content p {
        margin-bottom: 2px;
    }
</style>

<script>
// 获取CSRF token
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

// 获取CSRF token（优先从meta标签获取）
function getCSRFToken() {
    const meta = document.querySelector('meta[name="csrf-token"]');
    if (meta) {
        return meta.getAttribute('content');
    }
    return getCookie('csrftoken');
}

document.addEventListener('DOMContentLoaded', function() {
    // 状态切换功能
    const markProcessedBtn = document.getElementById('mark-processed-btn');
    const markPendingBtn = document.getElementById('mark-pending-btn');
    
    function toggleStatus(action, button) {
        const messageId = {{ message.id }};
        const csrftoken = getCSRFToken();
        
        fetch('/{{ project.id }}/messages/' + messageId + '/toggle-status/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': csrftoken
            },
            body: JSON.stringify({ action: action })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert(data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('操作失败，请重试');
        });
    }
    
    if (markProcessedBtn) {
        markProcessedBtn.addEventListener('click', function() {
            if (confirm('{% trans "确定要将此消息标记为已处理吗？" %}')) {
                toggleStatus('mark_processed', this);
            }
        });
    }
    
    if (markPendingBtn) {
        markPendingBtn.addEventListener('click', function() {
            if (confirm('{% trans "确定要将此消息标记为未处理吗？" %}')) {
                toggleStatus('mark_pending', this);
            }
        });
    }
});
</script>
{% endblock %}